<template>
  <div id="gz">
    <section class="bozhu" v-for="(v, i) in gz" :key="i">
      <section class="bozhu-up">
        <section class="bozhu-tu">
         <img :src="v.toux">
        </section>
        <section class="bozhu-wen">
          <h1>{{ v.name }}</h1>
          <h2>{{ v.time }}</h2>
        </section>
      </section>

      <section class="bozhu-main">
        <img :src="v.video">
      </section>

      <section class="bozhu-down">
        <h3>{{v.title}}</h3>
        <h4>{{v.otitle}}</h4>
        <h5>
          <span class="iconfont icon-dianzan-"></span>
          {{v.name}}
        </h5>
      </section>
    </section>
    <!-- --------------- -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      gz: [],
    };
  },
  created() {
    axios({
      url: "/data/mock",
      method: "get",
    })
      .then((ok) => {
        this.gz = ok.data.guanzhu;
        // console.log("ok", ok);
        // console.log("this.gz", this.gz);
      })
      .catch((err) => {
        console.log("请求失败了", err);
      });
  },
};
</script>



<style scoped>
#gz {
  width: 100%;
  height: 100%;
  /* background: cadetblue; */
  overflow-y: auto;
}
#gz .bozhu {
  height: 6.3rem;
  /* background-color: burlywood; */
  border-bottom: 0.04rem solid silver;
  margin-top: 0.05rem;
}
#gz .bozhu img {
  width: 100%;
  height: 100%;
}
#gz .bozhu .bozhu-up {
  height: 0.37rem;
  /* background-color: cornflowerblue; */
  display: flex;
  padding-left: 0.16rem;
}
#gz .bozhu .bozhu-up .bozhu-tu {
  width: 0.34rem;
  height: 0.35rem;
  /* background-color: darkturquoise; */
}
#gz .bozhu .bozhu-up .bozhu-wen {
  width: 0.9rem;
  height: 0.35rem;
  /* background-color: silver; */
}
#gz .bozhu .bozhu-up .bozhu-wen h1 {
  width: 100%;
  font-size: 0.13rem;
  overflow: hidden;
  white-space: nowrap;
  /* 超出不换行 */
}
#gz .bozhu .bozhu-up .bozhu-wen h2 {
  font-size: 0.12rem;
  color: #cfcfd9;
}
#gz .bozhu .bozhu-main {
  height: 5rem;
  /* background-color: darkcyan; */
}
#gz .bozhu .bozhu-down {
  height: 0.94rem;
  /* background: darksalmon; */
  padding-left: 0.16rem;
  padding-top: 0.2rem;
}
#gz .bozhu .bozhu-down h3 {
  width: 100%;
  font-size: 0.18rem;
  font-weight: 600;
  overflow: hidden;
  
}
#gz .bozhu .bozhu-down h4 {
  font-size: 0.14rem;
  color: slategray;
  overflow: hidden;
  flex-wrap: nowrap;
}
#gz .bozhu .bozhu-down h5 {
  font-size: 0.12rem;
  color: rgb(49, 81, 112);
}
</style>